<template>
  <div>
    <el-drawer v-model="isShow" title="请选择导出字段" direction="rtl" @close="handleClose">
      <div class="content">
        <el-checkbox-group v-model="checkedCities" @change="getFiled">
          <el-checkbox v-for="item in (detailList as any)" :key="item.fieldName" :label="item">{{
            item.title
          }}</el-checkbox>
        </el-checkbox-group>
        <div class="fun">
          <el-button size="small" type="primary" @click="handleAll">全选</el-button>
          <el-button size="small" type="primary" @click="handleExport">确认导出</el-button>
          <el-button size="small" @click="handleClose">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  emits: {
    close: null,
    handleFiled: null,
  },
  props: {
    showing: Boolean,
    detailList: {
      type: Array,
      required: true,
    },
  },
  setup(props, { emit }) {
    const checkedCities = ref([]) as any
    // const cities = [{ a: 'Shanghai' }, { b: 'Beijing' }, { c: 'Guangzhou' }, { d: 'Shenzhen' }]
    let isShow: any = ref(props.showing)
    watch(
      () => props.showing,
      (newVal) => {
        if(newVal==false){
          checkedCities.value = []
        }
        isShow.value = newVal
        console.log(newVal, 'props.showing')
      }
    )
    const handleClose = () => {
      emit('close', false)
      // console.log(231);
    }
    const getFiled = (arr) => {
      console.log(arr,'arr');
      checkedCities.value = arr
    }
    const handleExport = () => {
      emit('handleFiled', checkedCities.value)
    }
    const handleAll = () => {
      checkedCities.value = props.detailList
    }
    return { isShow, getFiled, handleClose, handleExport, handleAll, checkedCities }
  },
})
</script>

<style scoped>
.content {
  padding: 0 20px;
  max-height: 80vh;
  overflow-y: auto;
  /* background-color: #884c4c; */
}
:deep(.el-checkbox) {
  display: block;
}
.fun {
  margin-top: 10px;
}
</style>
